<template>
	<view class="content">
		<view class="top flexr align-center justify-center">
			<view class="primary-button" @click="showRecommendDialog">
				<image class="recommend-icon" src="@/static/recommend.png"></image>
				我要推荐
			</view>
		</view>
		<view class="recommend-total">
			已推荐给<text class="text-color-primary">7</text>位朋友
		</view>
		<view class="scroll-view">
			<view class="recommend-item flexr align-center align-self-stretch" v-for="(item, index) in 10" :key="index">
				<image class="icon" src="@/static/shop_removed.png"></image>
				<view class="flex-1 align-self-stretch bottom-divider flexc justify-center">
					<view class="text-color1">兰陵王</view>
					<view class="text-color2 phone">1234545454</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="recommendDialogRef"
			@change="onRecommendDialogChanged"
			type="bottom" background-color="#fff"
			border-radius="30rpx" :mask-click="false">
			<recommendDialog
				:show="recommendDialogShow"
				@onCancel="onCancelRecommendDialog"
				@onConfirm="onConfirmRecommendDialog"
			></recommendDialog>
		</uni-popup>
	</view>
</template>

<script setup>
import recommendDialog from '@/widgets/recommendDialog.vue';
import { ref } from 'vue';
const recommendDialogRef = ref(null);
const recommendDialogShow = ref(false);
function showRecommendDialog() {
	recommendDialogRef.value?.open();
}
function onCancelRecommendDialog() {
	recommendDialogRef.value?.close();
}
function onConfirmRecommendDialog() {
	recommendDialogRef.value?.close();
}
function onRecommendDialogChanged({show}) {
	console.log('onRecommendDialogChanged', show);
	recommendDialogShow.value = show;
}
</script>

<style lang="scss">
.content {
	background-color: #156557;
	padding-bottom: 0;
	.top {
		height: 240rpx;
		min-height: 240rpx;
		.primary-button {
			flex: 1;
			margin: 0 64rpx;
			height: 96rpx;
			min-height: 96rpx;
			border-radius: 48rpx;
			.recommend-icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}
		}
	}
	.recommend-total {
		background-color: white;
		padding-top: 40rpx;
		padding-bottom: 16rpx;
		border-top-right-radius: 36rpx;
		border-top-left-radius: 36rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		color: $text-color2;
	}
	.scroll-view {
		flex: 1;
		overflow-y: scroll;
		background-color: white;
		padding-bottom: env(safe-area-inset-bottom);
		.recommend-item {
			height: 136rpx;
			min-height: 136rpx;
			padding: 0 32rpx;
			.icon {
				width: 88rpx;
				height: 88rpx;
				border-radius: 44rpx;
				margin-right: 24rpx;
			}
			.phone {
				font-size: 24rpx;
			}
		}
	}
}
</style>
